<template>
  <div class="block">
    <el-timeline v-for="(msg,index) in msgList" :key="msg.noticeId">
      <el-timeline-item v-bind:timestamp="msg.noticeDate" placement="top" :hide-timestamp="true" v-if="msg.noticeStatus==false"
        :color="'red'">
        <el-card>
          <h4>{{msg.noticeContent}}</h4>
          <p> {{msg.noticeDate}} 来自于{{msg.noticeSender}}</p>
          <el-row :gutter="20">
          <el-col :span="6"><i class="el-icon-delete" @click="getIndex(index)"></i></el-col>
          <el-col :span="6" :offset="6"><i class="el-icon-check" @click="updateMsg(index)"></i></el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
      <el-timeline-item v-bind:timestamp="msg.noticeDate" :hide-timestamp="true" placement="top" v-if="msg.noticeStatus==true">
        <el-card>
          <h4>{{msg.noticeContent}}</h4>
          <p> {{msg.noticeDate}} 来自于{{msg.noticeSender}}</p>
          <el-row :gutter="20">
          <el-col :span="6"><i class="el-icon-delete" @click="getIndex(index)"></i></el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <!--before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。-->
          <span>确定删除这条消息吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :index="''+index" @click="delMsg()">确 定</el-button>
          </span>
      </el-dialog>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'messageCenter',
  data () {
    return {
      msgVisible: false,
      dialogVisible: false,
      msgList: [],
      msgId: '',
      index: ''
    }
  },
  mounted () {
    this.userId = this.$route.params.id
    if (this.userId) {
      this.getMsgList()
    }
  },
  methods: {
    getIndex (index) {
      this.index = index
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getMsgList () {
      this.$axios({
        methods: 'POST',
        url: '/user/getMsgList',
        params: {
          userId: this.userId
        }
      })
        .then((response) => {
          console.log(response)
          this.check = response.data.data[0]
          if (this.check === true) {
            this.msgList = []
            // eslint-disable-next-line prefer-const
            response.data.data[1].forEach((item, index, array) => {
              // 执行代码
              this.msgList.push(item)
            })
          } else {
            alert('获取用户消息异常')
          }
          console.log(this.check)
        })
        .catch(function (error) { console.log(error) })
    },
    updateMsg (index) {
      this.msgId = this.msgList[index].noticeId
      this.msgList[index].noticeStatus = true
      console.log('MsgID' + this.msgId)
      this.$axios({
        methods: 'POST',
        url: '/user/updateMsgStatus',
        params: {
          userId: this.userId,
          msgId: this.msgId
        }
      })
        .then((response) => {
          console.log(response)
          this.check = response.data.data[0]
        })
        .catch(function (error) { console.log(error) })
      this.$router.go(0)
    },
    delMsg () {
      console.log(this.index)
      this.msgId = this.msgList[this.index].noticeId
      console.log(this.msgId)
      // console.log(this.msgList[$index].msgId)
      this.msgList.splice(this.index, 1)
      this.dialogVisible = false
      this.$axios({
        methods: 'POST',
        url: '/user/deleteMsg',
        params: {
          userId: this.userId,
          msgId: this.msgId
        }
      })
        .then((response) => {
          console.log(response)
          // this.msgList.splice(this.msgList.indexOf(index), 1)
          // this.getMsgList()
        })
        .catch(function (error) { console.log(error) })
    }
  },
  watch: {
    items: function () {
      this.$nextTick(() => [
        this.goAnchor(window.location.hash)
      ])
    }
  }
}
</script>

<style lang="less" scoped>
.block {
  // margin-right: 10%;
  margin: auto;
  // margin-top: 0;
  width: 80%;
}
#el-icon-delete{
    float:right;
}

#el-icon-delete{
    float:right;
}

.el-timeline-item{
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1)
}
</style>>
